{include file='common/_meta' /}
<style>
.layui-input-block .layui-form-select .layui-anim-upbit dd
{
    white-space: nowrap;
    max-height: 100%
}
.layui-form-select dl dd, .layui-form-select dl dt {
    white-space: nowrap;
}
blockquote h1,blockquote h2,blockquote h3{
    display: inline-block;
}
.layui-elem-quote ul li img{max-width: 100%}
</style>
<body>
<div class="container">

    <div class="layui-row">
        <div class="layui-col-md12 breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>发送短信</cite></a>
                <a><cite>普通短信</cite></a>
            </span>
        </div>
    </div>

    <div class="layui-fluid" style="background-color: #fff;overflow-x: hidden;">

        <div class="layui-col-xs12 layui-col-md6">
        <div class="layui-row">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="" lay-filter="form1" id="form-article1" enctype="multipart/form-data">
                            {if condition="session('user_type') == 'admin' "}

                            <div class="layui-row">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><span class="custom-color-red">*</span>选择用户：</label>
                                    <div class="layui-input-block">
                                        <select name="cha" id="cha" lay-filter="cha" lay-search lay-verify="required">
                                            <option value=""></option>
                                            {volist name='cha' id='c'}
                                            <option value="{$c.channel_id}"> {$c.company_name} ({$c.channel_id})</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {/if}
                            <div class="layui-row is-mianshen">
                                <div class="layui-form-item layui-form-text">
                                    <input type="text" name="isms" value="1" title="" hidden>
                                    <!-- <input type="text" name="ope" value="90001" title="" hidden> -->
                                    <label class="layui-form-label"><span class="custom-color-red">*</span>短信内容：</label>
                                    <div class="layui-input-block">
                                        <textarea name="notesnr" rows="6" class="layui-textarea" oninput="duanxinyl(this)" lay-verify="required"></textarea>
                                    </div>
                                 </div>
                            </div>

                            <div class="layui-row">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">短信预览：</label>
                                    <div class="layui-input-block">
                                        <p class="duanxinyl" style="background:#F7F5F5;padding:9px 15px;min-height:20px;word-wrap:break-word;word-break: normal;">&nbsp;</p>
                                        <p style="margin-top:5px">
                                        <small>总字数：</small><b><span class="zongzs" style="font-size:1.5rem;color:#FB3535">0</span></b><small>个</small>
                                        &nbsp;&nbsp;
                                        <small>当前短信条数：</small><b><span class="dxtiao" style="font-size:1.5rem;color:#FB3535">0</span></b><small>条</small>
                                        </p>
                                    </div>
                                </div>
                            </div>
<!--                            <div class="layui-row">-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">文件导入：</label>-->
<!--                                    <div class="layui-input-block">-->
<!--                                        <input type="checkbox" value="1" name="txtflie" title="导入号码文件xlsx格式" lay-skin="primary" lay-filter="is_files">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

                            <div class="layui-row is-no-files">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label"><span class="custom-color-red">*</span>目标号码：</label>
                                    <div class="layui-input-block">
                                        <textarea name="phones" id="phones" class="layui-textarea" onkeyup="IWS_CheckDecimal(this)"></textarea>
                                        <div style="font-size: 13px;color:#6d6c6c">格式必须为:国际区号+号码，如:8613900000000，区号与号码之间不加0，多个号码之间用英文半角逗号区分;</div>

                                    </div>
                                 </div>
                            </div>

                            <div class="layui-row layui-hide is-files">
                                <div class="layui-form-item layui-col-sm12">
                                    <label class="layui-form-label"><span class="custom-color-red">*</span>目标号码：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input uploadfile-name" disabled>
                                    </div>
                                    <div class="layui-input-inline">
                                        <button type="button" class="layui-btn custom-sm-fluid"><i class="layui-icon layui-icon-upload"></i>浏览文件</button>
                                        <input type="file" multiple name="phonesfile" style="position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;opacity: 0;filter:alpha(opacity=0);" accept=".xlsx" class="change-update">
                                    </div>
                                </div>
                            </div>

<!--                            <div class="layui-row">-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">定时发送：</label>-->
<!--                                    <div class="layui-input-block">-->
<!--                                        <input type="checkbox" name="is_dingshi" value="1" title="" lay-skin="primary" lay-filter="is_dingshi">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

                            <div class="layui-row layui-hide is-dingshitime">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><span class="custom-color-red">*</span>选择时间：</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" name="dingshitime" id="dingshitime1">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注：</label>
                                    <div class="layui-input-block">
                                        <textarea name="message" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-row">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn custom-sm-fluid" lay-submit lay-filter="formDemo1">发送</button>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
        <div class="layui-row" style="padding-top: 10px;">
            <blockquote class="layui-elem-quote">
                <ul style="font-size:22px;line-height:30px">
                    {volist name="send_attentiontxt" id="st"  }
                    <li>{$st|raw}</li>
                    {/volist}
                    <li>群发模板文件.xlsx <a style="color:#2B22F9" href="/uploads/qun_fa.xlsx" download="群发模板文件">点击下载</a></li>
                    <li style="color:red;font-size:28px;line-height:30px">特别注意:</li>
                    <li style="color:red;font-size:28px;line-height:30px">表格的手机号码列单元格式必须选择常规</li>
                    <li><img style="border:3px solid red" src="/static/img/65985456623.jpg" alt=""></li>
                    <!-- <li>注意事项：</li>
                    <li>* 目标号码手动输入格式：手机号+英文逗号+手机号+...；例子：18813266666,18813266666；</li>
                    <li>* 目标号码文件导入格式：每一行一个号码，文件格式为 txt ；</li>
                    <li>* 短信内容变量用符号：{0}或{1}或... 代替，例：验证码：{0} ，地址：{1} ；</li>
                    <li>* 短信内容变量必须从{0}开始 ，依次递增；</li>
                    <li>* 填写的变量个数必须与模板变量的个数相同 ；</li>
                    <li>* 目标号码最多20000个 ；</li> -->
                    {if condition="session('user_type') == 'admin' "}
                    <li><a href="javascript:;" style="color:#2B22F9" onclick="openedit()">编辑</a></li>
                    {/if}
                </ul>
            </blockquote>
        </div>
        <div class="layui-hide" id="result-msg">
            <div class="layui-fluid" style="padding-top: 30px;">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>反馈信息</legend>
                    <div class="layui-field-box result-msg" style="padding-left: 20px;padding-right: 20px;color: #333;font-size: 14px;">
                        ...
                    </div>
                </fieldset>
            </div>
        </div>
        </div>
    </div>
</div>
<div hidden>
<textarea id="openedit">{$send_attentiontxt_e}</textarea>
</div>
{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

layui.use(['layer', 'form', 'jquery', 'element', 'laydate'], function() {

    var layer   = layui.layer;
    var form    = layui.form;
    var $       = layui.jquery;
    var element = layui.element;
    var laydate = layui.laydate;

    // 定时
    laydate.render({
        elem: '#dingshitime1'
        ,type: 'datetime'
        ,min: '{$thistime}'
        ,value: '{$thistime}'
    });


    //是否上传文件
    form.on('checkbox(is_files)', function(data) {

        var parent = $(data.elem).parents('form');

        if (data.elem.checked) {

            parent.find('.is-no-files').addClass('layui-hide');
            parent.find('.is-files').removeClass('layui-hide');
        } else {

            parent.find('.is-no-files').removeClass('layui-hide');
            parent.find('.is-files').addClass('layui-hide');
        }
    });

    //是否定时发送
    form.on('checkbox(is_dingshi)', function(data) {

        var parent = $(data.elem).parents('form');

        if (data.elem.checked) {

            parent.find('.is-dingshitime').removeClass('layui-hide');
        } else {

            parent.find('.is-dingshitime').addClass('layui-hide');
        }
    });

    //选择文件，显示文件名及路径
    $('form').on('change', '.change-update', function(event) {

        $(this).parents('.layui-form-item').find('.uploadfile-name').val(this.value);
    });


    form.on('submit(formDemo1)', function(data) {

        if(data.field.txtflie){

            if(!data.field.phonesfile){
                layer.msg("请选择文件");
                return false;
            }

            layer.confirm("提交前请确认文件格式无误",{title:"温馨提示",btn: ['可以提交', '我再看看']},function(index){   
                layer.close(index);
                article_submit();
                return false;
            })
        }else{
            article_submit();
        }
        return false;
    });

    function article_submit() {

        var indexload = layer.load(0);
        var formData = new FormData($('#form-article1')[0]);
        var dingshitime = 0;

        if (formData.get('is_dingshi') == 1) {

            dingshitime = 1;
        }

        $('.result-msg').html('');

        $.ajax({
            type : "POST",
            url  : "{:url('SendNote/send_n')}",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success : function(e) {
                layer.close(indexload);
                if(e.code == 200){
                    layer.alert(e.msg, {icon: 1},function(index){
                        layer.close(index);
                    })
                    $('#result-msg').removeClass('layui-hide');
                    
                    $('.result-msg').html(e.msg);

                    $('#form-article1')[0].reset();

                    $(".layui-form").find(".duanxinyl").text("");
                    $(".layui-form").find(".dxtiao").text(0);
                    $(".layui-form").find(".zongzs").text(0);

                    $('.is-no-files').removeClass('layui-hide');
                    $('.is-files').addClass('layui-hide');
                    // 定时
                    laydate.render({
                        elem: '#dingshitime1'
                        ,type: 'datetime'
                        ,value: new Date()
                    });
                    $('.is-dingshitime').addClass('layui-hide');
                    
                    parent.getapplycount_fun();//刷新余额
                }else{
                    layer.alert(e.msg, {icon: 2},function(index){
                        layer.close(index);
                    })
                }

            },error:function() {

                layer.close(indexload);
                layer.msg('提交失败，请检查网络',{icon: 5,time:1000});
                $dingshitime = 0;
            }
        });

    }
});
{if condition="session('user_type') == 'admin' "}
//设置注意事项
function openedit()
{
    layer.prompt(
        {
            title: "设置注意事项",
            formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
            value: $("#openedit").val(), //初始时的值，默认空字符
            maxlength: 1000, //可输入文本的最大长度，默认500
            area: ['500px', '350px'] //自定义文本域宽高
        },
        function(value, index, elem){
            layer.close(index);

            var indexload = layer.load(0);

            $.ajax({
                type : "POST",
                url  : "{:url('SendNote/attentiontxt')}",
                data : {"atxt":value,"type":1},
                success : function(e) {

                    location.reload();

                    layer.msg(e, {icon: 6, time:1000});

                    layer.close(indexload);

                }, error:function() {
                    layer.close(indexload);
                }
            });
        }
    )
}
{/if}

//短信预览
function duanxinyl(obj)
{
    var tab_content = $(obj).parents(".layui-form");

    tab_content.find(".duanxinyl").text("");
    tab_content.find(".dxtiao").text(0)
    tab_content.find(".zongzs").text(0);
    var txt = '';

    txt = tab_content.find("textarea[name=notesnr]").val();
    var lengthtxt = txt.length;

    if(lengthtxt > 0){

        var formData = new FormData($('#form-article1')[0]);
        formData.delete('phones')
        formData.delete('phonesfile')
        $.ajax({
            type : "POST",
            url  : "{:url('SendNote/postTxt')}",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success : function(e) {
                tab_content.find(".dxtiao").text(e.smsNumber)
                tab_content.find(".zongzs").text(e.bytes);
            },error(){
                tab_content.find(".dxtiao").text('计算异常');
            }
        })
        // $.post('{:url('SendNote/postTxt')}',{txt:txt},function(e){
        //     parseInt(e)
        //     console.log(e)
        // });
    }

    tab_content.find(".duanxinyl").text(txt);
}
/*验证textarea目标号码*/
function IWS_CheckDecimal(obj) {

    var temp = /^[0-9,]+$/;
    if (temp.test(obj.value)) {

    } else {

        obj.value = obj.value.substr(0, obj.value.length - 1);
        IWS_CheckDecimal(obj);
    }
}


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>